<template>
  <div>
    <el-tabs v-model="activeName" style="background-color: white" type="card">
      <el-tab-pane label="组织机构" name="zzjg">
        <el-row style="position: relative">
          <el-col
            :span="25"
            style="overflow: auto; width: 100%"
            :style="{ height: heightTree }"
          >
            <el-tree
              :props="props"
              :load="loadNode"
              lazy
              :expand-on-click-node="false"
              @node-click="itemClick"
              :highlight-current="true"
              style="
                min-width: 100%;
                display: inline-block;
                background-color: transparent;
              "
            >
              <span slot-scope="{ node, data }">
                <span> <i v-bind:class="data.icon"></i>{{ node.label }} </span>
              </span>
            </el-tree>
          </el-col>
        </el-row>
        <el-checkbox v-model="isContain" style="margin: 10px 0px 10px 20px"
          >包含下级</el-checkbox
        >
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import store from "@/store";
import {getTreeLeafLazy} from '@/api/young/datacenter/person.js'
export default {
  data() {
    return {
      props: {
        label: "name",
        children: "zones",
        isLeaf: "leaf",
        icon: "",
      },
      activeName: "zzjg",
      heightTree: window.innerHeight - 220 + 'px',
      isContain: true,
      selectedNode:[],
    };
  },
  methods: {
    loadNode(node, resolve) {
      let params;
      if (node.level === 0) {
        // 获得parentId = -1 的树
        params = {
          userId: store.getters.user_id.toString(),
          parentId: "-1",
        };
      } else {
        params = {
          userId: store.getters.user_id.toString(),
          parentId: node.data.id,
        };
      }
      getTreeLeafLazy(params).then((data) => {
        //return resolve(data.resultdata);
        data.resultdata.forEach((item) => {
          //let treeIcon = ''
          if (item.b0194 == "机构分组") {
            item.icon = "customRoot-icon";
          } else if (item.b0194 == "内设机构") {
            item.icon = "customChildren-icon";
          } else if (item.b0194 == "法人单位") {
            item.icon = "customParent-icon";
          }
        });
        return resolve(data.resultdata);
      });
    },
    itemClick(node) {
      this.$emit('node-click', node)
    },
  },
};
</script>

<style scoped>
.customRoot-icon {
  width: 20px;
  height: 16px;
  display: inline-block;
  background: url('../../../assets/images/young/customRoot.png') no-repeat;

}

.customParent-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
  background: url('../../../assets/images/young/customParent.png') no-repeat;
}

.customChildren-icon {
  width: 20px;
  height: 18px;
  display: inline-block;
  background: url('../../../assets/images/young/customChildren.png') no-repeat;
}
</style>